coding notes

window 1000x700

$warm-1: fff8a9;
$warm-2: ffd970;
$warm-3: ffa685;
$warm-4: ff7992;
$warm-5: c35d96;
$mid-0: 9a80a7;
$mid-1: #765792;
$mid-2: 44356a;
$mid-3: 1d294f;
$mid-4: 0b1b34;
$cool-1: abfbff;
$cool-2: 82e3ff;
$cool-3: 82beff;
$cool-4: 8299ff;
$cool-5: 816ed2;
$neutral-1: b4c0c2;
$neutral-2: 596f79;
$neutral-3: 35536a;
$neutral-4: 16334f;

$bgcolor // background colour
$bgimg // background image

$color // text colour
$lcolor // link colour
$alcolor // active
$vlcolor // visited

CSS styles to edit appearance of input

$titlecolor // colour of title...but I don't know where this appears, possibly it means page headers

$gtfbgcolor // game wrapper bg
$gtffncolor // text colour in game wrapper
$gtibgcolor // background of game board

$rtfbgcolor // ranking wrapper bg
$rtffncolor // text colour in ranking wrapper
$rtibgcolor // ranking row bg

$ftfbgcolor // submission form wrapper bg
$ftffncolor // text colour in form wrapper
$ftibgcolor // form bg
$resultcolor // colour of displayed points

^http:\/\/+.
/^[\w-+.]+\@[\w-+.]+$/


Instructions for setting up WebSameGame:
*Make sure your web server can run Perl scripts!
1. Download and unzip the folder
2. Open wsame.cgi in a text editor, and edit the first line to reflect the location of Perl on your server
3. Make any desired changes to the top section of wsame.cgi
You can also edit colours and some text values in view.ini.
4. jcode.pl contains deprecated code. Edit lines 679, 688 to remove the word "defined". This is the minimum to get it to work, but see my recommended tweaks as well.
5. Upload the following in text mode to your server: wsame.cgi, view.ini, jcode.pl, thismon.txt, lastmon.txt, total.txt
Set permissions according to the table on the website.
6. In the same directory, create a directory called img with permissions set to 604. If this needs to be a different name for any reason, change the path in view.ini.
7. Upload all image files in binary mode to this directory and set permissions to 604.
8. In the same directory as wsame.cgi, create another directory called lockdir. Set its permissions to 707.
9. Access wsame.cgi from your Internet browser - if it displays correctly, you're done.

For editing:

  • home.gif: Used on the high scores page to link to someone's entered homepage URL.
  • k1a.gif ~ k5b.gif: Clickable pieces in the game. The second image is the hover image. These CAN be made different in size, but you'll need to edit the dimensions in view.ini (lines 69-70)
  • logo.gif: Displayed above the game contents. You can change this image, though if you change the dimensions, you'll need to edit the dimensions in view.ini (lines 52-53). You can also remove it entirely by setting the $titleimg variable to ''.
  • new.gif: Displayed next to high scores that were added in the past 24 hours.
  • none.gif: The board square image (displayed when there is no piece in that square).

Troubleshooting

  • Can't use 'defined(%hash)' - Edit jcode.pl as mentioned above.
  • suexec policy violation - Can happen if you upload the text mode files in binary mode. Try reuploading those files but in the correct mode.
  • Broken images/Server unable to read htaccess file, denying access to be safe - Some permission issues with the img directory. I could only get this to work by setting 755 on img.
  • The homepage field does not take https - See tweaks below to modify the URL validation.

Tweaks:
Per the creator's rules, I can't distribute the modified version. You can apply these changes to make them more similar to mine:

  • wsame.cgi - Changed line 198 to:

(!\(url) || (\)url =~ /^(ht|f)tp(s?)\:\/\/0-9a-zA-Z(:(0-9))(\/?)([a-zA-Z0-9-.\?\,\'\/\+&%$#_])?$/) || &error(6);
This is a better regex match for URLs, source: https://docs.microsoft.com/en-us/previous-versions/msp-n-p/ff650303(v=pandp.10)?redirectedfrom=MSDN
The code appears to encode symbols, so XSS doesn't seem to be a concern?

You are also welcome to copy and paste my translations.


corownet oekaki:

  • style the posting text form
  • style the posting pages
  • style the admin pages
  • style the paintbbs/shipainter pages

mostly, put stuff into panels where appropriate, then fiddle with the colours


gacha shop

  • it looks kind of old, but also like a secret hangout. has some pride paraphernalia up in the shop. the first floor looks kind of dark and has light coming in through the doorway from outside - it's shaded a bit dark, like an interior during midday (maybe have this correspond to actual time of day?). on other floors it's bright as normal, with fluorescent lighting. there are a bunch of boxes in the corner.
  • has a shopkeeper who will say various things when clicked. she has a bunch of different looping animations (randomly chosen upon page load) and sometimes will not be present.
  • she/they, a wolf furry, middle-aged, kind of gruff and doesn't smile much/tends to look bored, but will say nice things to you/welcome you to the shop. kind of has a susie vibe, but older
  • reading newspaper, sleeping with a magazine over her face, doing a puzzle book, playing a retro gameboy, eating instant noodles, picking up and putting together dropped capsule halves, assembling capsules into a basket, wiping gacha machines, wiping vending machines, sweeping the floor, moving boxes outside (visible in the first floor shadow)...
  • she can appear on other floors.
  • the first floor is basically a demo of how things work, and so it's smaller in size/can have cast shadows/lighting effects that modify the look of things. Second floor and up are open for submission.
  • there is a calendar that when clicked, will show the latest updates.
  • there is a recruitment notice that when clicked, will show the rules/specs for adding a new gacha (can be popped out of an iframe)
  • there is a phone directory and phone that when clicked, will show credits for used resources
  • there is a coin exchange with a directory paper on it that when clicked, will show a list of all machines
  • there are ad flyers that when clicked, will show links/buttons to the creators, as well as a button that can be used to link back
  • there is an empty capsule collection basket that when clicked, will prompt the user if they would like to clear their localstorage (reset collection status for all gachas)
  • there is a radio that plays some background music. can be clicked to turn it off. on other floors this is a speaker on the wall.
  • when floor capacity is reached, a new floor will open. other floors can be accessed via the floor directory or stairs, probably. the shopkeeper's counter is only on the first floor, but each floor has a bench/coin exchange/vending machines/capsule collection basket. I'd kind of like each floor to have their own unique features, but I'm not sure if that would make positioning the machines harder. maybe it'd require each floor to have the positions predefined when they're created.
  • should probably have a way to indicate to people that something can be clicked (small magnifying glass icon?)

gacha machines

  • dispenses a random image when clicked - no rarities
  • there is no minimum for number of images in a gacha, but 5-6 is a recommended minimum.
  • there is no hard limit on number of objects in the gacha. images are not loaded when the page loads, but are numbered sequentially so they can be pulled with confidence. should probably have a limit on the total file sizes though.
  • all images must be authorised to be saved and reuploaded by the user, i.e. the submitter owns the image and allows other people to use it on their page
  • this is EXTREMELY loosely defined, I simply don't want any users to put together a collection of images that they found lying around and pass it off as their work
  • no particular theme is required - images don't have to be actual objects, they can be things like website building resources, etc.
  • the submitter can add some additional rules on the usage of the image (e.g. must credit them, etc.)
  • the machine's display panel can be clicked to show the submitter's description, rules, object count, date of last update
  • also perhaps a panel of dispensed objects (localstorage saves whether an item has been dispensed before)
  • a summarised version of this overlay will also be shown the first time a user clicks a machine's handle (in case they don't click the display panel first).
  • recolour only is recommended, but the machine can be completely redrawn as long as it fits within the spec/doesn't require any changes to the code
  • the gacha capsule can also be completely redrawn. the submitter can submit multiple gacha capsules - these will also be randomly selected and not correspond to the contents.
  • machines are added in chronological order and will not be reordered on request
  • submitters can submit more than one gacha and there is no limit on number submitted, but are limited to 2 machines per floor so there isn't a complete monopoly
  • the top right of the machine is where a small link is inserted to the submitter's site

image reqs

  • a template for the gacha machine + capsules is provided, along with a sample of how the files should be set up (sample can also be edited to make their own) + a demo page they can use to test their machine.
  • minimum effort is a face image for the machine (drawn on the template) with an edit for the user's site name, a capsule, an object
  • recommended effort is a machine recolour, 3 capsules, 6 objects
  • additional images: a website button, a "poster" (can be the face image) for the directory

vending machines?

  • an easier way to contribute to the shop
  • the advertisement panel is instructions for submitting to the vending machine
  • requires just a small image for the machine window + a big image when the item is vended
  • when the item is vended, the big picture + item description + link to submitter is shown

kiddie rides?

  • music + art
  • click to start playing a track (this will pause bgm?) as the ride bobs up and down

data/coding stuff

  • there should be a data file that lists each gacha machine in order
  • use vue to handle the machines, shouldn't be hard once I've got one sample up
  • deploy to neocities via github (probs going to have to think about sound/music hosting)

  1. \w-+. 

Left-click: follow link, Right-click: select node, Scroll: zoom
x